<template>
   <div class="two">
    <div class="two-one">
        <h3>标签</h3>
        <div class="two-two" v-for="item in tableData3" :key="item.id"  @click="goToTag(item.id, item.name)"
  style="cursor: pointer;">
            {{item.name}}</div>
    </div>
      <div class="two-three">
            <img  :src="tableData4.avatar" alt="">
            <h1>{{tableData4.author}}</h1>
            <span>{{tableData4.introduction}}</span>
        </div>
    
  </div>
</template>

<script>
export default {
data(){
    return{
        tableData3:[],
        tableData4:[],
    }
},
 created() {
   
    this.getList3();
    this.getList4();
    
  },
methods:{
   goToTag(tagId, name) {
    this.$router.push(`/labels?id=${tagId}`);
    localStorage.setItem("tagName", name);
  },
     getList3() {
      this.$axios
        .post(`/api/api/tag/list`)
        .then((res) => {
          this.tableData3 = res.data.data;
          console.log(this.tableData3, "33333");
          console.log(res);
        })
        .catch((err) => {
          console.log(err);
        });
    },
     getList4() {
      this.$axios
        .post(`/api/api/blog/setting/detail`)
        .then((res) => {
          this.tableData4 = res.data.data;
          console.log(this.tableData4, "图片");
          console.log(res);
        })
        .catch((err) => {
          console.log(err);
        });
    },
}
}
</script>

<style scoped>
.two{
    width: 100%;
    height: 100vh;
   background-color: #f4f4f4;
   display: flex;
   justify-content: space-around;  
    align-items: flex-start; 
}
.two-two{
  margin: 0px 8px 4px 0;
  padding: 2px 10px;
  background-color: rgb(222 247 236);
  font-size: 12px;
  border-radius: 10px;
}
.two-one{
  width: 890px;
  display: flex;
  flex-wrap: wrap;
  background-color: white;
  margin-top: 20px;
  
}
.two-one h3{
    width: 830px;
  padding: 0 20px;
}
.two-two:hover{
  background-color: rgb(188 240 218);
}
.two-three{
     width: 283px;
  height: 185px;
  background-color: white;
  text-align: center;
  margin-top: 20px;
}
.two-three h1{
    margin: 0;
}
.two-three img{
    width: 60px;
  height: 60px;
  border-radius: 50%;
  margin-top: 20px;
}

</style>